import Schedules from "../../api/schedules.js";
import OrderApi from "../../api/order.js"
import Return from "./index.js";
import Seating from "../../api/seating.js"
export default class {
    data={
        _id:"",
        status:1
    }
    pitch = [];
    orderdata={
        username:"z3",
        movieImg:[],
        moveName:"",
        cinemaName:"",
        theater:"",
        displayName:"",
        showDate:"",
        showTime:"",
        price:"",
        nowdateTime:""
    }
    constructor({ obj, el }) {
        // 接收传入的值添加给this
        this.$el = $(el);
        this.obj = obj;
        this.init();
    }
    init() {
        this.render();
        this.handle();
    }
    // 构建页面框架
    render() {
        this.orderdata.moveName=this.obj.data.movieId.cname;
        this.orderdata.cinemaName=this.obj.data.cinemasId.name;
        this.orderdata.theater=this.obj.data.theaterId.name;
        this.orderdata.showDate=this.obj.data.showDate;
        this.orderdata.showTime=this.obj.data.showTime;
        this.orderdata.movieImg=this.obj.data.movieId.images;
        this.$el.html(
            `
            <section style="display: flex;">
            <div style="margin:40px 100px ;width: 820px;" >
                <div style=" display: flex;margin:30px 0px ;">
                    <h1 style=" flex: 1;">放映厅座位</h1>
                    <button type="submit" class="layui-btn" id="back" lay-submit="" lay-filter="demo1">返回</button>
                </div>
                <table id ="tacket">
                    <tbody class="layui-btn-container"></tbody>
                </table>
            </div>
            <div style="width: 300px; border:1px solid red; font-size: 24px; margin-left:50px;" id="pitchOn">
            <h2 style="width: 200px; margin: auto; text-align: center;">${this.obj.data.cinemasId.name}</h2>
            <div style="width: 200px; margin: 25px auto; text-align: center; display: flex;" >
                <div style="margin-right:30px;">${this.obj.data.movieId.cname}</div>
                <div>${this.obj.data.theaterId.name}</div>
            </div>
            <div style="width: 270px; margin: auto; text-align: center; display: flex;">${this.obj.data.showDate}&nbsp;&nbsp;&nbsp;${this.obj.data.showTime}</div>
            <span style="color:red; font-size: 30px width: 200px; margin:20px auto; text-align: center; display:inline-block;" id="money" ></span>
            </div>
            </section>
            <div style=" margin-left:1178px;"><button class="layui-btn layui-btn-lg" id="submit">提交</button></div>
            
            `
        );
        this.$back = $("#back");
        this.$tacket = $("#tacket");
        this.$pitchOn = document.querySelector("#pitchOn");
        this.$money = document.querySelector("#money")
        this.submit = $("#submit");
        this.rerender();
    }
    async rerender() {
        const schedules = this.obj.data._id
        // 获取座位数据
        const data = await Schedules.Seats({ schedules });
        // console.log(this.obj.data);
        // console.log(data);
        let seatContent = ``;
        for (let i = 0; i <= 8; i++) {
            let temp = `<tr>`;
            for (let j = 0; j <= 8; j++) {
                if (data[j].status == 0) {
                    temp += `<td><button type="button" class="layui-btn layui-btn-primary" name="${data[j]._id}">${data[j].seatId.displayName}</button></td>`
                } else {
                    temp += `<td><button type="button" class="layui-btn layui-btn-danger" name="${data[j]._id}">${data[j].seatId.displayName}</button></td> `
                }
            }
            temp += `</tr>`
            data.splice(0, 9);
            seatContent += temp;
        }
        $(".layui-btn-container").html(seatContent);
    };
    // 按钮点击事件
    handle() {
        this.$back.on("click", this.back.bind(this));
        this.$tacket.on("click", this.tacket.bind(this));
        this.submit.on("click",this.add.bind(this));

    };
    async add(){
        let date= new Date;
        this.orderdata.nowdateTime=date;
        console.log(this.orderdata);
    this.orderdata = await OrderApi.addOrder(this.orderdata);
    if (this.orderdata._id) {
      layer.msg('新增成功', {
        icon: 1,
        time: 1500 //2秒关闭（如果不配置，默认是3秒）
      }, function () {
        location.hash = "#/info/schedules";
      });

    } else {
      layer.msg('新增失败', {
        icon: 1,
        time: 1500
      });
    }
    }
    // 返回排片页面
    back() {
        new Return({ el: ".layui-body" });
    }
    tacket(e) {
        let event = e || window.event;
        if (event.target.getAttribute("class")=="layui-btn layui-btn-normal") {return};
        event.target.setAttribute("class", "layui-btn layui-btn-normal");
        const seatInfo = event.target.innerHTML;
        this.pitch.push(seatInfo);
        this.orderdata.displayName+=seatInfo;
        let aEle = document.createElement(`div`);
        let seatID = event.target.name;
        aEle.setAttribute("name", seatID);
        aEle.innerHTML = this.pitch
        this.$pitchOn.appendChild(aEle)
        this.pitch=[];
        let num =this.$pitchOn.childNodes;
        let total = num.length -9;
        let zongjia = total*this.obj.data.price;
        this.$money.innerHTML= `总价:  ${zongjia} 元`
        this.orderdata.price = zongjia;
    }
}